<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import { useScrollTransparentNavbar } from '@/hooks'
import user from '@/api/user.js'

const paging = ref(null)
// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const state = reactive({
  scoreLogData: [],
})

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const queryList = (pageNo: any, pageSize: any) => {
  user
    .scoreLog({
      page: pageNo,
      page_size: pageSize,
    })
    .then((res) => {
      console.log(res)
      // 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
      paging.value.complete(res.data)
    })
    .catch((err) => {
      // 如果请求失败写paging.value.complete(false)，会自动展示错误页面
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false)
    })
}
onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      积分记录
    </TnNavbar>
    <view class="container">
      <!-- 方式1 start-->
      <view
        class="tn-margin-top-sm"
        :style="{ paddingTop: `${navbarHeight + 10}px` }"
      >
        <z-paging
          ref="paging"
          v-model="state.scoreLogData"
          :paging-style="{ paddingTop: `${navbarHeight}px` }"
          @query="queryList"
        >
          <template #refresher="{ refresherStatus }">
            <CustomRefresher :status="refresherStatus" />
          </template>

          <view class="">
            <view
              v-for="(item, index) in state.scoreLogData"
              :key="index"
              class="tn-flex lists items-center"
              style="border-bottom: 3rpx solid var(--tn-color-gray-light)"
            >
              <view class="tn-pl-sm" style="width: 80vw">
                <view class="tn-flex justify-between tn-text-ellipsis-1">
                  <view class="justify-content-item">
                    <text class="tn-text-lg">{{ item.remark }}</text>
                  </view>
                </view>
                <view class="tn-pt-xs tn-text-ellipsis tn-text-ellipsis-1">
                  <text class="tn-text-sm" style="color: #aaaaaa">{{ item.create_time }}</text>
                </view>
              </view>
              <view class="" style="width: 20vw">
                <view class="tn-flex justify-end tn-mb-xs tn-mt-xs">
                  <text class="tn-text-lg"> {{ item.score }} 积分 </text>
                </view>
              </view>
            </view>
          </view>
        </z-paging>
      </view>
      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  // background: #f8f7f8;

  .lists {
    // background-color: #ffffff;
    border-radius: 18rpx;
    margin: 20rpx 0rpx;
    padding: 20rpx;
  }
}
/* 底部安全边距 start*/
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom));
  height: calc(140rpx + constant(safe-area-inset-bottom));
}
</style>
